<script setup lang="ts">
import orderService from '@/api/modules/order/order.ts'
import { formatTime } from '@/utils/day.ts'

const props = defineProps({
  productUuid: {
    type: String,
    required: true,
  },
})
const orderList = ref([])
const toast = useToast()

onMounted(() => {
  getHistoryOrder()
})

function getHistoryOrder() {
  toast.loading('数据加载中...')
  orderService.mobileList({
    isHistory: true,
    productUuid: props.productUuid,
  }).then((res) => {
    const data = res.data
    const list = data.orderMobileQueryListVos
    console.log(res)
    orderList.value = list
  }).finally(() => {
    toast.close()
  })
}

function onOrderDetail(orderUuid) {
  uni.navigateTo({
    url: `/pages/order/detail?orderUuid=${orderUuid}`,
  })
}

function payTagClass(order) {
  switch (order.orderStatus) {
    case 'waitVaild':
      return 'bg-orange-100 text-orange-600'
    case 'vaild':
      return 'bg-green-100 text-green-600'
    case 'invalid':
      return 'bg-red-100 text-red-600'
    default:
      return 'bg-gray-100 text-gray-600'
  }
}
</script>

<template>
  <div class="h-60 flex justify-center items-center custom-empty-tip" v-if="orderList.length === 0" >
    <wd-status-tip image="content" tip="暂无历史订单" class="custom-empty-tip">
      <template #image>
        <img src="@/static/svg/empty.svg" class="w-20 h-20">
      </template>
    </wd-status-tip>
  </div>
  <template v-else>
    <div
      v-for="order in orderList"
      :key="order.orderUuid"
      class="history-order-item"
      @click="onOrderDetail(order.orderUuid)"
    >
      <div class="shadow-xs mb-2 flex flex-col gap-2 rounded-lg bg-white p-4">
        <div class="flex items-center justify-between text-sm text-gray-500">
          <span>{{ order.orderCode }}</span>
          <span :class="payTagClass(order)" class="rounded-full px-2 py-0.5 text-xs font-semibold">
            {{ order.orderStatusDict }}
          </span>
        </div>

        <div class="text-base text-gray-800 font-semibold">
          {{ order.productName }}
        </div>
        <!--            <div class="text-sm text-gray-500"> -->
        <!--              {{ order.productTypeDict }} -->
        <!--            </div> -->
        <div class="flex items-center justify-between text-sm text-gray-600">
          <span>下单时间：{{ formatTime(order.orderTime, 'YYYY-MM-DD') }}</span>
          <span class="text-xl text-red-500 font-semibold">￥{{ order.totalPrice }}</span>
        </div>

        <div class="truncate text-xs text-gray-400">
          车架号：{{ order.vin }}
        </div>
      </div>
    </div>
  </template>
</template>

<style scoped lang="scss">
.history-order-item{
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

:deep(.custom-empty-tip) {
  .wd-status-tip__text{
    font-size: 16px;
    color: rgba(52, 52, 63, 1);
  }
}
</style>
